<template>
  <div>
    <div class="search">
      <el-form :inline="true" :model="queryParams" size="small">
        <el-form-item label="年级">
          <el-select
            value-key="id"
            filterable
            clearable
            size="small"
            v-model="queryParams.gradeNo"
            placeholder="请选择"
            @change="handleChangeGrade"
          >
            <el-option
              v-for="item in gradeOptions"
              :key="item.id"
              :label="item.name"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select
            filterable
            clearable
            size="small"
            v-model="queryParams.classNo"
            placeholder="请选择"
            @change="handleChangeClass"
          >
            <el-option
              v-for="item in classOptions"
              :key="item.classNo"
              :label="item.name"
              :value="item.classNo"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            v-model="queryParams.userName"
            @blur="handleSearch"
            size="small"
          />
        </el-form-item>
        <el-form-item label="上报状态">
          <el-select
            size="small"
            v-model="queryParams.reportStatus"
            @change="handleChangeClass"
            clearable
          >
            <el-option label="已上报" :value="0" />
            <el-option label="健康未上报" :value="1" />
            <el-option label="疫测未上报" :value="2" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="数据更新时间：">
          <span>{{updatedTime}}</span>
        </el-form-item> -->
        <el-form-item label="核酸检测时间">
          <el-date-picker
            size="small"
            :picker-options="pickerOptions"
            @change="handleSearch"
            v-model="pickerVal"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label-width="20" label=" ">
          <el-button type="primary" size="mini" @click="handleSearch"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div style="display: flex;">
        <div v-if="checkAuthority('/stu/eyes')" class="switch-btn cursor iconfont" :class="[isShow ? 'icon-yanjing': 'icon-biyan']" @click="handleClickIsShow"></div>
        <div>
          <el-button v-if="checkAuthority('/student/down')" size="mini" type="primary" @click="handleExport"
            >导 出</el-button
          >
        </div>
      </div>
    </div>
    <acc-table
      :tableData="tableData"
      :columnDefs="columnDefs"
      @click-header-select="handleClickHeaderSelect"
    >
      <template #order="{ index }">
        <span>{{ index | orderIndex(pageVo) }}</span>
      </template>
      <template #idCard={row}>
          <div>{{isShow && row.idCard.length === 18 ?  $options.filters.idCarDesensitization(row.idCard) : row.idCard}}</div>
        </template>
      <template #antigenResult="{ row }">
        <span
          :style="{ color: row.antigenResult === '阴性' ? 'green' : 'red' }"
          >{{ row.antigenResult }}</span
        >
      </template>
      <template #nucleicAcid="{ row }">
        <div
          v-for="item in row.nucleicAcid"
          :key="item"
          :style="{ color: item === '阴性' ? 'green' : 'red' }"
          >{{ item }}</div
        >
      </template>
      <template #nucleicAcidTime="{ row }">
        <div
          v-for="item in row.nucleicAcidTime"
          :key="item"
          >{{ item }}</div
        >
      </template>
      <template #healthCode="{ row }">
        <div
          v-for="item in row.healthCode"
          :key="item"
          :style="{
            color:
              item === '绿码'
                ? 'green'
                : item === '黄码'
                ? 'yellow'
                : 'red',
          }"
          >{{ item }}</div
        >
      </template>
      <template #vaccines="{ row }">
        <span>{{
          row.vaccines === 0 ? "未接种" : `接种${row.vaccines}针`
        }}</span>
      </template>
      <template #action="{ row }">
        <el-button type="text" size="mini" disabled v-if="row.status === 1"
          >已通知</el-button
        >
        <el-button
          type="text"
          size="mini"
          @click="handleInform(row)"
          v-if="row.status === 0"
          >通知</el-button
        >
      </template>
    </acc-table>
    <acc-page
      :total="total"
      :page-size="pageVo.pageSize"
      :current-page="pageVo.pageNum"
      @current-change="handleChangePage"
      @size-change="handleChangeSize"
    ></acc-page>
  </div>
</template>

<script>
import { columnDefs } from './mock'
import { getGradeList, getclassesList } from '@/views/children/antiepidemic/js/base'
import { getHealthTracking, exportHealthTracking, notification } from '@/views/children/antiepidemic/js/health'
import { decrypt } from '@/utils/crypto'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限
export default {
  props: {
    currentCampus: String,
    updatedTime: String
  },
  data () {
    return {
      isShow: true,
      visible: false,
      pickerVal: [],
      queryParams: {
        classNo: null,
        tenantNo: null,
        gradeNo: {},
        districtNo: null,
        reportStatus: null
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      columnDefs: [],
      tableData: [],
      pageVo: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      gradeOptions: [],
      classOptions: [],
      currentHeaderSelect: []
    }
  },
  created () {
    this.columnDefs = columnDefs
    this.getGrade()
    this.handleSearch()
  },
  watch: {
    currentCampus (newVal) {
      this.queryParams.districtNo = newVal
      this.handleSearch()
    }
  },
  methods: {
    checkAuthority,
    handleClickIsShow () {
      this.isShow = !this.isShow
    },
    getGrade () {
      getGradeList({ pageNum: 1, pageSize: 999, status: 1 }).then(res => {
        if (res.code !== 0) return
        this.gradeOptions = res.data.records
      })
    },
    getclasses () {
      getclassesList({ gradeName: this.queryParams.gradeNo.name, status: 1, pageNum: 1, pageSize: 999 }).then(res => {
        if (res.code !== 0) return
        this.classOptions = res.data.classList.records
      })
    },
    handleChangeGrade (val) {
      this.queryParams.classNo = null
      this.classOptions = []
      if (val !== '') this.getclasses()
      this.handleSearch()
    },
    handleChangeClass () {
      this.handleSearch()
    },
    handleSearch () {
      this.visible = false
      this.pageVo.pageNum = 1
      this.loadDataList()
    },
    loadDataList () {
      getHealthTracking(this.formData()).then(res => {
        res.data = JSON.parse(decrypt(res.data))
        this.tableData = res.data.healthTrackingResp
        this.total = res.data.total
      })
    },
    handleChangePage (page) {
      this.pageVo.pageNum = page
      this.loadDataList()
    },
    handleChangeSize (size) {
      this.pageVo.pageSize = size
      this.handleSearch()
    },
    handleClickHeaderSelect (val) {
      this.currentHeaderSelect = val
      this.handleSearch()
    },
    formData (val) {
      let temp = {}
      let status = {}
      this.currentHeaderSelect.forEach(item => {
        status = { ...status, [item.prop]: item.column.value }
      })
      Object.assign(temp, this.queryParams, status, this.pageVo)
      // 后端导出逻辑问题。。。
      if (val === 'exp') temp.pageSize = this.total
      if (val === 'exp') temp.pageNum = 1
      let userInfo = localStorage.getItem('Standard__User-Info')
      temp.tenantNo = JSON.parse(userInfo).value.tenantNo
      temp.type = 0
      temp.gradeNo = temp?.gradeNo?.no || null
      temp.startTime = this.pickerVal?.[0] || ''
      temp.endTime = this.pickerVal?.[1] || ''
      return temp
    },
    handleInform (row) {
      let userInfo = localStorage.getItem('Standard__User-Info')
      let tenantNo = JSON.parse(userInfo).value.tenantNo
      let userNo = JSON.parse(userInfo).value.userNo
      let data = {
        antigenStatus: row.antigenResult || '',
        antigenStatusDate: row.antigenTime || '',
        createUser: userNo,
        healthCodeStatus: row.healthCode || '',
        inShFlag: row.isHu || '',
        name: row.studentName || '',
        nucleicAcidStatus: row.nucleicAcid || '',
        nucleicAcidStatusDate: row.nucleicAcidTime || '',
        passRiskAddr: row.risk || '',
        tenantNo,
        userNo: row.studentNo,
        userType: 0,
        vaccineStatus: row.vaccines,
        notificationDate: this.queryParams.historyTime
      }
      this.$confirm('是否通知?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        notification(data).then(() => {
          this.loadDataList()
          this.$message.success('通知成功')
        })
      }).catch(() => { })
    },
    handleExport () {
      exportHealthTracking(this.formData('exp')).then(() => {
        this.$message.success('导出成功')
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.switch-btn{
  width: 50px;
  height: 30px;
  line-height: 30px;
  font-size: 30px;
  text-align: center;
}
.search {
  display: flex;
  justify-content: space-between;
}
</style>
